import './Collect.scss'
import React, { Component } from 'react';
import { NavBar, Space, Toast, Swiper } from 'antd-mobile'
import { create_request_action, create_request_cel } from '../store/actionCreators/index'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'

import store from '../store/index'


class Collect extends Component {

    componentDidMount() {
        this.props.request_list();
    }

    clear(id) {
        this.props.cel_list(id);
        this.props.request_list();
    }

    togoodinfo(id) {
        this.props.history.push({ pathname: '/goodinfo', state: { id } })
    }

    gohome() {
        this.props.history.push({ pathname: '/index/home' })
    }

    // 点击返回上一页
    back() {
        this.props.history.go(-1)
    }
    render() {

        return (
            <div className='Collect'>
                <div className="head"><NavBar onBack={() => { this.back() }}>我的收藏</NavBar></div>
                {
                    this.props.list.length == 0 ?
                        <>
                            <div className='empty'>
                                <p>还没有收藏的物品</p>
                                <span onClick={() => { this.gohome() }}>快去逛逛吧！</span>
                            </div>
                        </> :
                        this.props.list.map((item, index) => {
                            return (
                                <div className='collectshop' key={index} >
                                    <div className='left'>
                                        <img src={item.pic} onClick={() => { this.togoodinfo(item.id) }} />
                                    </div>
                                    <div className='right'>
                                        {/* <h3>COSME DECORTE 黛珂植物欣韵沁莹化妆水 200ml</h3> */}
                                        <h3 onClick={() => { this.togoodinfo(item.id) }}>{item.name}</h3>
                                        <strong>原价￥<span>270</span></strong>
                                        <div className='bottom'>
                                            <p>活动价￥<span>{parseInt(item.salesPrice.value)}</span></p>
                                            <div className='cancel' onClick={() => { this.clear(item.id) }}>取消收藏</div>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                }
            </div>
        );
    }
}

//注入属性,方法到组件的props中, 在组件中 拿到属性就是拿到store中的数据, 调用方法就是修改store中的数据
//最终组件内部不再有任何store相关的代码( store.subscribe, store.dispatch 等 ) 
//也是就是实现了 react组件 和 redux的代码层面的解耦
export default connect(
    (state) => { //注入(绑定)store中的数据到 组件的props中
        return {
            list: state.favlist
        }
    },
    (dispatch) => { //注入(绑定)方法 到组件的props中
        return {
            request_list: function () {
                dispatch(create_request_action())
            },
            cel_list: function (id) {
                dispatch(create_request_cel(id))
            }
        }
    }
)(withRouter(Collect))

// export default Collect;